<template>
  <div style="padding: 20px 10px 10px 20px;width: 100%;overflow-y: scroll;" v-loading="infoLoading">

<!--    <img class="cover-img"-->
<!--         :src="(articleForm.coverUrl == null || articleForm.coverUrl === '' ?-->
<!--         theme === 'light' ?-->
<!--          'https://xiaozei-bucket.oss-cn-hangzhou.aliyuncs.com/bjsteam/bjstk-electron/logo1.png' :-->
<!--          'https://xiaozei-bucket.oss-cn-hangzhou.aliyuncs.com/bjsteam/bjstk-electron/logo1-dark.png' :-->
<!--          articleForm.coverUrl)-->
<!--          +'?x-oss-process=image/resize,h_300'">-->

    <el-form ref="articleForm" label-width="80px" label-position="top" class="bjs-form">

<!--      <el-form-item label="封面地址" prop="userId">-->
<!--        <el-input class="bjs-input info-input" v-model="articleForm.coverUrl" :disabled="readOnly"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item label="文件夹" prop="userId">
        <treeSelect
            style="width: 100%"
            class="info-input"
            :disabled="readOnly"
            :clearable=true
            :props="folder.props"
            :options="folder.list"
            :value="articleForm.folderId"
            @getValue="articleForm.folderId = $event"
        >
        </treeSelect>
      </el-form-item>

      <el-form-item label="文章名称" prop="userId">
        <el-input class="bjs-input info-input" v-model="articleForm.name" :disabled="readOnly"></el-input>
      </el-form-item>

      <el-form-item label="文章标签" prop="userId">
        <el-tag
            size="mini"
            class="bjs-tag"
            v-for="tag in articleForm.tag"
            :key="tag"
            :closable="!readOnly"
            :disable-transitions="true"
            @close="handleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input
            size="mini"
            class="input-new-tag bjs-input"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-show="!readOnly" v-else size="mini" class="button-new-tag bjs-button" @click="showInput">New Tag</el-button>
      </el-form-item>

      <el-form-item prop="userId">
        <el-col :span="8">
          <el-switch
            class="bjs-switch"
            active-value="Y"
            inactive-value="N"
            v-model="articleForm.top"
            inactive-text="置顶"
            :disabled="readOnly"
          ></el-switch>
        </el-col>

        <el-col :span="8">
          <el-switch
            class="bjs-switch"
            active-value="Y"
            inactive-value="N"
            v-model="articleForm.pubState"
            inactive-text="发布"
            :disabled="true"
          ></el-switch>
        </el-col>

        <el-col :span="8">
          <el-radio-group size="mini" v-model="articleForm.type">
            <el-radio-button class="artType bjs-radio" label="NOTE" :disabled="readOnly">笔记</el-radio-button>
            <el-radio-button class="artType bjs-radio" label="BLOG" :disabled="readOnly">博客</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-form-item>
    </el-form>

    <el-button-group style="margin-top: 10px;">
      <el-button size="mini" class="bjs-button" style="width: 70px;" @click="save" v-show="!readOnly">保存</el-button>
      <el-button size="mini" class="bjs-button" style="width: 70px;" @click="publish" v-show="articleForm.articleId">发布</el-button>
    </el-button-group>

    <div class="info-statis" >
      <div class="statis-header">
        <span style="margin-left: 10px;">文章编号:{{articleForm.articleId == null ? '无' : articleForm.articleId}}</span>
        <span style="margin-right: 10px;">最后修改 : {{articleForm.updTime}}</span>
      </div>

      <div class="statis-body">
        <div class="statis-body-words">
          <div class="statis-name">Words</div>
          <div class="statis-value">{{articleForm.words}}</div>
        </div>

        <div class="statis-body-hits">
          <div class="statis-name">Hits</div>
          <div class="statis-value">{{articleForm.hits}}</div>
        </div>

        <div class="statis-body-views">
          <div class="statis-name">Views</div>
          <div class="statis-value">{{articleForm.pViews}}</div>
        </div>
      </div>
    </div>

    <el-collapse
        class="bjs-collapse"
        style="margin-top: 25px"
        v-model="activeHistory"
        :accordion="true"
        @change="activeHistoryHandler"
    >

      <el-collapse-item title="查看浏览记录" name="1">
        <el-table
            border
            class="bjs-table-mini"
            size="mini"
            max-height="500"
            :data="viewHistory">
          <el-table-column prop="updTime" label="日期" width="160" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="viewIp"  label="IP"  :show-overflow-tooltip="true"> </el-table-column>
        </el-table>
      </el-collapse-item>

      <el-collapse-item title="查看修改记录" name="2">
        <el-table
            border
            class="bjs-table-mini"
            size="mini"
            max-height="500"
            :data="updHistory">
          <el-table-column prop="creTime"   align="center" label="日期" width="150" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="saveType"  align="center" label="类型" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column                  align="center" label="查看" width="50">
            <template slot-scope="scope">
              <span style="cursor: pointer;" @click="toNewView(scope.row)">查看</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
  import { getFolderTree } from '../../../api/folder.js'
  import { postPublishArticle,getDraftOne,postDraftContent,putDraftInfo,getDraftLogList } from '../../../api/article'
  import treeSelect from '../../../components/treeSelect'
  import {isNotNull, isNull} from '../../../assets/js/utils/validate'
  export default {
    name: 'articleInfo',
    props: {
      // 文件夹类型
      readOnly: {
        type: Boolean,
        default: () => true
      }
    },
    data() {
      return {
        folder: {
          list: [],
          props: {
            value: 'folderId',
            label: 'name',
            children: 'child'
          }
        },
        articleForm : {
          articleId: null,
          folderId : null,
          type     : 'NOTE',
          name     : '',
          tag      : [],
          words    : 0,
          hits     : 0,
          pViews   : 0,
          coverUrl : '',
          top      : 'N',
          pubState : 'N',
          delState : 'N',
          creTime  : '',
          updTime  : ''
        },

        activeHistory : '',
        updHistory    : [],
        viewHistory   : [],
        inputVisible  : false,
        inputValue    : '',
        infoLoading   : true
      }
    },
    computed: {
      theme () {return this.$store.state.config.theme.type}
    },
    mounted() {
    },
    methods : {
      updInit(article) {
        this.resetForm()
        this.findFolders()
        let param = {articleId: article.articleId};
        getDraftOne(param).then(resp => {
          this.articleForm = resp.data
          if (isNotNull(resp.data.tag)) {
            this.articleForm.tag = resp.data.tag.split(',')
          } else {
            this.articleForm.tag = []
          }
          this.loadingFalse()
        })
      },
      addInit(){
        this.resetForm()
        this.findFolders()
        this.loadingFalse()
      },
      save () {
        let param = Object.assign({},this.articleForm)
        if (this.articleForm.tag instanceof Array) {
          param.tag = this.articleForm.tag.join(',')
        }

        if (isNotNull(this.articleForm.articleId)) {
          putDraftInfo(param).then(() => {
            this.$bjsNotify.success('修改文章成功')
            this.resetForm();
            this.$emit('refreshArticle');
          })
        } else {
          postDraftContent(param).then(() => {
            this.$bjsNotify.success('新建文章成功')
            this.resetForm();
            this.$emit('refreshArticle');
          })
        }
      },
      publish () {
        postPublishArticle({articleId:this.articleForm.articleId}).then(() => {
          this.$bjsNotify.success('文章发布成功!')
        })
      },
      resetForm () {
        this.articleForm.articleId = null
        this.articleForm.folderId  = null
        this.articleForm.type      ='NOTE'
        this.articleForm.name      = ''
        this.articleForm.tag       = []
        this.articleForm.words     = 0
        this.articleForm.hits      = 0
        this.articleForm.pViews    = 0
        this.articleForm.coverUrl  = ''
        this.articleForm.top       = 'N'
        this.articleForm.pubState  = 'N'
        this.articleForm.delState  = 'N'
        this.articleForm.creTime   = ''
        this.articleForm.updTime   = ''

        this.activeHistory = ''
        this.updHistory    = []
        this.viewHistory   = []
      },
      loadingTrue() {
        this.infoLoading = true
      },
      loadingFalse () {
        setTimeout(() => {
          this.infoLoading = false
        },400)
      },
      // ========================================= 文件夹 =======================================
      findFolders() {
        getFolderTree({type: 2}).then(resp => {
          this.folder.list = resp.data
        })
      },
      // ========================================= 标签 =========================================
      handleClose(tag) {
        if(this.readOnly) return
        this.articleForm.tag.splice(this.articleForm.tag.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue && this.articleForm.tag.indexOf(inputValue) === -1) {
          this.articleForm.tag.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      activeHistoryHandler (val) {
        this.activeHistory = val
        if (val === '2') {
          this.findUpdHistory()
        }
      },
      findUpdHistory () {
        if (this.updHistory.length > 0 || isNull(this.articleForm.articleId)) {
          return
        }
        let param = {articleId : this.articleForm.articleId}
        getDraftLogList(param).then(resp => {
          this.updHistory = resp.data
        })
      },
      toNewView (row) {
        console.log(row.articleId)
      },
    },
    components: {
      treeSelect
    }
  }
</script>

<style scoped lang="scss">
.bjs-form {
  /deep/ .el-form-item{
    text-align: left;
    margin-bottom: 6px;
  }

  /deep/ .el-form-item__label{
    padding: 0;
    font-size: 13px;
    font-weight: bold;
    line-height: 17px;
    padding-right: 15px;
    color: $theme-color-light-dark;
    [data-theme="night"] & {
      color: $theme-color-night-dark;
    }
  }
}

.cover-img {
  min-width: 100%;
  min-height:130px;
  max-width: 100%;
  max-height:130px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid;
  object-fit: cover;
  border-color: #e1e1e1;
  [data-theme="night"] & {
    border-color: #3a3a3a;
  }

}

.info-input {
  /deep/ .el-input__inner {
    height: 30px;
    font-size: 12px;
  }
}

.bjs-tag {
  border-radius: 0;
  color: $theme-color-light-dark;
  border-color:$theme-color-light-3;
  background-color: $theme-color-light-3;
  /deep/ .el-tag__close {
    color: $theme-color-light-dark;
  }

  [data-theme="night"] & {
    color: $theme-color-night-dark;
    border-color: $theme-color-night-3;
    background-color: $theme-color-night-3;
    /deep/ .el-tag__close {
      color: $theme-color-night-dark;
    }
  }
}
.el-tag + .el-tag {
  margin-left: 5px;
}
.button-new-tag {
  width: 80px;
  margin-left: 5px;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 80px;
  margin-left: 5px;
  vertical-align: bottom;

  /deep/ .el-input__inner {
    height: 21px;
  }
}

.artType {
  /deep/ .el-radio-button__inner{
    padding: 5px 10px;
  }
}

.info-statis {
  width: 100%;
  height:110px;
  margin-bottom: 20px;
  margin-top: 20px;
  border-radius: 5px;
  color:#7C38BC;
  background-color: #e7ba37;
  display: flex;
  flex-direction: column;
  [data-theme="night"] & {
    // color: $theme-color-light;
    // background-color: $theme-color-night-dark;
    color: #7a7a7a;
    background-color: #343434;
  }

  .statis-header {
    width: 100%;
    height: 20%;
    font-size: 12px;
    border-bottom: 1px solid rgba(131,100,186,0.32);
    [data-theme="night"] & {
      border-bottom: 1px solid $theme-color-night-dark-3;
    }
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .statis-body {
    width: 100%;
    height: 80%;
    font-weight: bold;
    font-family: Lato;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    .statis-body-words {
      width: 33%;
      height: 100%;
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      border-right: 1px solid  rgba(131,100,186,0.32);
      [data-theme="night"] & {
        border-right: 1px solid $theme-color-night-dark-3;
      }
    }
    .statis-body-hits {
      width: 33%;
      height: 100%;
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      border-right: 1px solid  rgba(131,100,186,0.32);
      [data-theme="night"] & {
        border-right: 1px solid $theme-color-night-dark-3;
      }
    }
    .statis-body-views {
      width: 33%;
      height: 100%;
      padding: 0 10px;
      display: flex;
      flex-direction: column;
    }
  }

  .statis-name {
    width: 100%;
    height: 50%;
    font-size: 20px;
    border-bottom: 2px solid  rgba(131,100,186,0.7);
    [data-theme="night"] & {
      border-bottom: 2px solid #5a5a5a;
    }

    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items: center;
  }

  .statis-value {
    width: 100%;
    height: 50%;
    font-size: 15px;
    display: flex;
    flex-direction: row;
    justify-content:flex-end;
    align-items: center;
  }
}


</style>
